<template>
  <div>
    <div class="people">
      <div
        class="peoplefirst"
        @click="handleToDetail(item)"
        v-for="(item, index) in mycirclelist"
        :key="index"
      >
        <img class="peoplefirst-img" :src="item.thumb" alt="" />
        <div class="people-center">
          <div class="people-left">
            <span>{{ item.title }}</span>
            <div class="fs">{{ item.member_num }} 成员</div>
            <span class="fs-xq"></span>
          </div>
          <!-- <div class="people-right"  >
             <span>{{item.foucs == '0'?'+关注':'已关注'}}</span>
            </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

  <script>
export default {
  props: {
    mycirclelist: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      focusqz: [],
      selectList: [],
    };
  },
  mounted() {},
  methods: {
    handleToDetail(item){

      this.$router.push({
          path: '/circle',
          query: {
            id: item.id
          }
        })
    }
  },
};
</script>

  <style lang="scss" scoped>
.people {
  padding: 0 7px;
  .peoplefirst {
    height: 71px;
    width: 100%;
    //   border: 1px solid red;
    display: flex;
    .peoplefirst-img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      margin-right: 7px;
    }
    .people-center {
      width: 100%;
      height: 100%;
      // border: 1px solid red;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 10px;
      .people-left {
        width: 142px;
        font-size: 8px;
        font-weight: 400;
        color: #333333;
        .fs {
          // width: 33px;
          // width: 41px;
          width: auto;
          height: 11px;
          background: #fff8ec;
          border-radius: 2px;
          font-size: 7px;
          font-family: Source Han Sans SC;
          font-weight: 400;
          color: #ffa341;
          margin-bottom: 5px;
        }
        .fs-xq {
          font-size: 8px;
          font-weight: 400;
          color: #333333;
          overflow: hidden;
          text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
          display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
          -webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
          -webkit-line-clamp: 1;
        }
      }
      .people-right {
        // width: 32px;
        padding: 0 5px;
        height: 14px;
        border: 1px solid #fd5151;
        border-radius: 7px;
        font-size: 7px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #fd5151;
        text-align: center;
        line-height: 14px;
      }
    }
  }
}
</style>
